<template>
  <div class="exclusive-page-container">
    <div ref="exclusivesRef" class="exclusives" style="overflow: auto" v-infinite-scroll="load" infinite-scroll-distance="1" infinite-scroll-immediate="false">
      <h2>独家放送</h2>
      <Exclusive v-for="(item, index) in exclusiveList" :key="index" :id="item.id" :pic="item.sPicUrl" :name="item.name"></Exclusive>
    </div>
  </div>
</template>

<script>
import { getExclusiveListAPI } from '@/api/exclusiveAPI.js'
import Exclusive from '@/components/Exclusive/Exclusive.vue'

export default {
  name: 'ExclusivePage',
  components: {
    Exclusive
  },
  data() {
    return {
      exclusiveList: [],
      limit: 30,
      offset: 0
    }
  },
  created() {
    this.initExclusiveList()
  },
  mounted() {
    this.getHight()
  },
  methods: {
    // 获取独家放送入口的列表数据
    async initExclusiveList() {
      const {
        data: { result: res }
      } = await getExclusiveListAPI(this.limit, this.offset)
      this.exclusiveList.push(...res)
      this.offset = this.offset + this.limit
      console.log(this.offset)
    },
    load() {
      this.initExclusiveList()
    },
    // 获取可视区域高度，用来设置 exclusives 的高度
    getHight() {
      // 屏幕可视区域高度
      let sh = document.documentElement.clientHeight || document.body.clientHeight
      console.log(sh)
      // exclusives 高度
      let eh = sh - 59 - 60 - 1
      this.$refs.exclusivesRef.style.height = eh + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
.exclusive-page-container {
  margin: 0 auto;
  width: 1088px;
  .exclusives {
    margin-left: -10px;
    overflow: hidden;
    /*滚动条*/
    &::-webkit-scrollbar {
      width: 5px;
    }

    /*滑块部分*/
    &::-webkit-scrollbar-thumb {
      background-color: #ccc9cd;
      border-radius: 2.5px;
    }
    h2 {
      text-align: left;
      margin: 10px 0 10px 10px;
      font-size: 20px;
      color: #333;
    }
    // 独家放送组件
    /deep/ .exclusive-box-card {
      float: left;
      margin-left: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
